<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>

<link th:href="@{/assets/plugins/jquery-ztree/3.5/css/metro/zTreeStyle.css}" rel="stylesheet"/>
<body class="hold-transition box box-main">
<input id="treeId" name="treeId" th:value="${category.id}" type="hidden">
<input id="treeName" name="treeName" th:value="${category.name}" type="hidden">
<div class="wrapper">
    <div class="treeShowHideButton" onclick="$.tree.toggleSearch();">
        <label id="btnShow" title="显示搜索" style="display:none;">︾</label>
        <label id="btnHide" title="隐藏搜索">︽</label>
    </div>
    <div class="treeSearchInput" id="search">
        <label for="keyword">关键字：</label><input type="text" class="empty" id="keyword" maxlength="50">
        <button class="btn" id="btn" onclick="$.tree.searchNode()"> 搜索</button>
    </div>
    <div class="treeExpandCollapse">
        <a href="#" onclick="$.tree.expand()">展开</a> /
        <a href="#" onclick="$.tree.collapse()">折叠</a>
    </div>
    <div id="tree" class="ztree treeselect"></div>
</div>
<div th:include="include::footer"></div>
<script th:src="@{/assets/plugins/jquery-ztree/3.5/js/jquery.ztree.all-3.5.js}"></script>

<script th:inline="javascript">
    $(function() {
        var url = ctx + "cms/category/treeData";
        var options = {
            url: url,
            expandLevel: 2,
            onClick : zOnClick
        };
        $.tree.init(options);
    });

    function zOnClick(event, treeId, treeNode) {
        var treeId = treeNode.id;
        var treeName = treeNode.name;
        $("#treeId").val(treeId);
        $("#treeName").val(treeName);
    }
</script>
</body>
</html>
